<template>
  <el-card style="margin: 10px 0">
    <div slot="header" class="clearfix">
      <el-tabs class="tab" v-model="activeName">
        <el-tab-pane label="销售额" name="sale"> </el-tab-pane>
        <el-tab-pane label="访问量" name="visite">
          <!-- <div class="content">
            <el-row :gutter="10">
              <el-col :span="20">
                <div class="myCharts2" ref="charts2"></div>
              </el-col>
            </el-row>
          </div> -->
        </el-tab-pane>
      </el-tabs>
      <div class="header-right">
        <span @click="setDate">今日</span>
        <span @click="setWeek">本周</span>
        <span @click="setMonth">本月</span>
        <span @click="setYear">本年</span>
        <el-date-picker
          v-model="date"
          value-format="yyyy-MM-dd"
          style="width: 300px; margin: 0 20px"
          size="mini"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
    </div>
    <div class="content">
      <el-row :gutter="10">
        <el-col :span="18">
          <div class="myCharts" ref="charts"></div>
        </el-col>
        <el-col :span="6">
          <div class="content-right">
            <h3>门店{{title}}排名</h3>
            <ul>
              <li>
                <span class="rindex">1</span>
                <span>肯德基</span>
                <span>323.234</span>
              </li>
              <li>
                <span class="rindex">2</span>
                <span>麦当劳</span>
                <span>299.123</span>
              </li>
              <li>
                <span class="rindex">3</span>
                <span>海底捞</span>
                <span>283.889</span>
              </li>
              <li>
                <span class="rindex1">4</span>
                <span>九九鸭</span>
                <span>266.432</span>
              </li>
              <li>
                <span class="rindex1">5</span>
                <span>汉堡王</span>
                <span>223.234</span>
              </li>
              <li>
                <span class="rindex1">6</span>
                <span>真功夫</span>
                <span>219.234</span>
              </li>
              <li>
                <span class="rindex1">7</span>
                <span>九九鸭</span>
                <span>266.432</span>
              </li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>

<script>
import * as echarts from "echarts";
import dayjs from 'dayjs'
export default {
  data() {
    return {
      activeName: "sale",
      myecharts: null,
      date: []
    };
  },
  mounted() {
    this.myecharts = echarts.init(this.$refs.charts);
    this.myecharts.setOption({
      title: {
        text: "销售额",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
          axisTick: {
            alignWithLabel: true,
          },
        },
      ],
      yAxis: [
        {
          type: "value",
        },
      ],
      series: [
        {
          name: "Direct",
          type: "bar",
          barWidth: "60%",
          data: [150, 100, 200, 334, 390, 330, 220, 300, 400, 500, 400, 300],
        },
      ],
    });
    // let myecharts2 = echarts.init(this.$refs.charts2);
    // myecharts2.setOption({
    //   title: {
    //     text: "访问量趋势",
    //   },
    //   tooltip: {
    //     trigger: "axis",
    //     axisPointer: {
    //       type: "shadow",
    //     },
    //   },
    //   grid: {
    //     left: "3%",
    //     right: "4%",
    //     bottom: "3%",
    //     containLabel: true,
    //   },
    //   xAxis: [
    //     {
    //       type: "category",
    //       data: [
    //         "一月",
    //         "二月",
    //         "三月",
    //         "四月",
    //         "五月",
    //         "六月",
    //         "七月",
    //         "八月",
    //         "九月",
    //         "十月",
    //         "十一月",
    //         "十二月",
    //       ],
    //       axisTick: {
    //         alignWithLabel: true,
    //       },
    //     },
    //   ],
    //   yAxis: [
    //     {
    //       type: "value",
    //     },
    //   ],
    //   series: [
    //     {
    //       name: "Direct",
    //       type: "bar",
    //       barWidth: "60%",
    //       data: [50, 100, 200, 334, 390, 330, 220, 300, 400, 500, 400, 600],
    //     },
    //   ],
    // });
  },
  computed: {
    title() {
        return this.activeName == 'sale' ? '销售额' : '访问量'
    }
  },
  watch: {
    title() {
        this.myecharts.setOption({
            title: {
                text: this.title
            }
        })
    }
  },
  methods: {
    //今日
    setDate() {
        const day = dayjs().format('YYYY-MM-DD')
        this.date = [day,day]
    },
    //本周
    setWeek() {
        const start = dayjs().day(1).format('YYYY-MM-DD')
        const end = dayjs().day(7).format('YYYY-MM-DD')
        this.date = [start,end]
    },
    //本月
    setMonth() {
        const start = dayjs().startOf('month').format('YYYY-MM-DD')
        const end = dayjs().endOf('month').format('YYYY-MM-DD')
        this.date = [start,end]
    },
    //本年
    setYear() {
        const start = dayjs().startOf('year').format('YYYY-MM-DD')
        const end = dayjs().endOf('year').format('YYYY-MM-DD')
        this.date = [start,end]
    }
  },
};
</script>

<style>
.el-card__header {
  border-bottom: none;
}
.clearfix {
  display: flex;
  justify-content: space-between;
  position: relative;
}
.tab {
  width: 100%;
}
.header-right {
  position: absolute;
  right: 0;
}
.header-right span {
  margin: 0 10px;
}
.myCharts {
  margin-top: 20px;
  width: 100%;
  height: 300px;
}
.myCharts2 {
  margin-top: 20px;
  width: 963px;
  height: 300px;
}
.content-right ul {
  list-style: none;
  width: 100%;
  height: 250px;
  padding: 0;
}
.content-right ul li {
  height: 15%;
}
.content-right ul li span:nth-child(1) {
  margin-right: 50px;
}
.content-right ul li span:nth-child(2) {
  margin-right: 50px;
}

.rindex {
  float: left;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: black;
  color: white;
  text-align: center;
}
.rindex1 {
  float: left;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  text-align: center;
}
</style>